<template>
  <div class="roomUserInfo">
    <div class="topBox">
      <img v-if="userInfo.avatar" @error="emptyAvatarUrl" :src="imgRequest + userInfo.avatar" alt="">
      <img v-else src="@/assets/images/head_default.png" >
      <div>
        <p>昵称：<span>{{userInfo.nickname}}</span></p>
        <p>余额：<span>{{accountData?accountData.money_usable:''}}</span></p>
      </div>
    </div>
    <div v-if="isUser">
      <router-link :to="{path:'/topUpCenter/recharge'}"><Button type="primary" long><img src="@/assets/images/room/cz.png" /> 账号充值</Button></router-link>
      <router-link :to="{path:'/topUpCenter/withdraw/withdraw'}"><Button type="primary" long><img src="@/assets/images/room/tx.png" /> 立即提现</Button></router-link>
      <a><Button type="warning" long @click="goRecord('dealDetail')"><img src="@/assets/images/room/jy.png" /> 交易记录</Button></a>
      <a><Button type="warning" long @click="goRecord('betRecord')"><img src="@/assets/images/room/tz.png" /> 投注记录</Button></a>
      <a :href="service == '暂无' ? 'javascript:void(0);' : service" target="_blank"><Button type="warning" long><img src="@/assets/images/room/kf.png" /> 在线客服</Button></a>      
    </div>
    <div v-else>
      <router-link :to="{path:'/reg'}"><Button type="error" long><img src="@/assets/images/room/zc.png" /> 立即注册</Button></router-link> 
      <a :href="service == '暂无' ? 'javascript:void(0);' : service" target="_blank"><Button type="warning" long><img src="@/assets/images/room/kf.png" /> 在线客服</Button></a>
    </div>
  </div>
</template>

<script>
    import _ from 'lodash';
    import { mapGetters, mapActions } from "vuex";
    export default {
            data() {
                return {
                  isUser: JSON.parse(localStorage.getItem('isUser'))
                }
            },
            created() {
            },
            mounted() {

            },
            computed: {
              ...mapGetters(["userInfo",'accountData','service'])
            },

            methods: {
              emptyAvatarUrl() { //清空头像路径
                this.userInfo.avatar = ''
              },
              goRecord: function(url){
                const {href} = this.$router.resolve({
                  path: '/personalCenter/'+url,
                  query: {'query': Date.parse(new Date()), lottery_type: this.$route.query.lottery_type}
                })
                var tempwindow=window.open()
                tempwindow.location= href
              }
            },
            watch: {},
            deactivated() {

            },
            beforeDestroy() {
            }

        }
</script>

<style scoped>
.roomUserInfo{background: #f3f3f3;width: 360px;transform: translateX(-100%);animation: leftSlide 1s forwards;}
@keyframes leftSlide {
    0%{}
    100%{transform: translateX(0);}
}
.topBox{background: white;border-radius: 3px;overflow: auto;width: 90%;margin: 0 auto;margin-top: 10px;}
.topBox>div{width: 100%;overflow: hidden;white-space: nowrap;}
.topBox img{width: 40px;height: 40px;border-radius: 50%;margin: 10px auto;display: block;}
.topBox div p{text-overflow: ellipsis;overflow: hidden;white-space: nowrap;text-align: center;}
.topBox div p:first-child span{color: #222222}
.topBox div p:last-child span{color: #F3596A}
.roomUserInfo button{width: 90%;display: block;margin: 0 auto;margin-top: 10px;font-size: 15px;}
.roomUserInfo button img{vertical-align: middle;}
.roomUserInfo a{color: white}

</style>
<style>
.roomUserInfo .ivu-btn-primary{background-color: #4A90E2;border-color: #4A90E2}
.roomUserInfo .ivu-btn-warning{background-color: #F48D12;border-color: #F48D12}
.roomUserInfo .ivu-btn-error{background-color: #c8313c;border-color: #c8313c}
</style>



// WEBPACK FOOTER //
// src/components/room/roomUserInfo/roomUserInfo.vue